<template>
    <div class="w-full h-full box-border flex flex-col overflow-y-hidden">
        <header class="flex-none block">
            <h5
                class="h-[76px] flex flex-row items-center text-primary text-2xl font-bold"
            >
                AI沟通
            </h5>
        </header>
        <main
            class="flex-1 overflow-y-hidden py-[10px] box-border flex flex-row items-stretch gap-3"
        >
            <section
                class="w-[300px] h-full overflow-hidden bg-white rounded-xl flex-none"
            >
                <div class="h-full relative">
                    <div class="absolute top-0 left-0 right-0 bg-white">
                        <div class="flex flex-row items-center py-6 pr-[14px]">
                            <div
                                class="bg-theme w-1 h-5 rounded-xs flex-none mr-[10px]"
                            ></div>
                            <template v-if="searchCollapsed">
                                <a-dropdown :overlay-style="{ width: '162px' }">
                                    <div
                                        class="flex flex-row items-center gap-[6px] cursor-pointer"
                                    >
                                        <span class="text-primary text-xl font-bold"
                                            >{{ selectedJob?.label }}</span
                                        >
                                        <GpFontIcon
                                            name="icon-jiantou-xia"
                                            class="!text-2xl text-primary"
                                        />
                                    </div>
                                    <template #overlay>
                                        <a-menu style="max-height: 420px; overflow-y: auto;">
                                            <a-menu-item :key="item.value" style="padding: 0;" v-for="item of jobOptions">
                                                <div @click="handleJobTap(item)"
                                                    :class="jobSelects.includes(item.value) ? 'active-filter-job-item' : ''"
                                                    class="flex flex-row items-center justify-between box-border h-10 pl-5 pr-2 filter-job-item">
                                                    <span class="text-sm">{{ item.label }}</span>
                                                    <GpFontIcon name="icon-xuanzhong" class="text-theme !text-[20px] hidden" />
                                                </div>
                                            </a-menu-item>
                                        </a-menu>
                                    </template>
                                </a-dropdown>
                                <div class="ml-auto flex-none">
                                    <GpFontIcon
                                        name="icon-sousuo"
                                        class="!text-2xl text-placeholder cursor-pointer"
                                        @click="handleInputSwitch"
                                    />
                                </div>
                            </template>
                            <div v-else class="flex-1 w-0 relative">
                                <GpSearchInput 
                                    placeholder="姓名 | 手机 | 微信查询"
                                    v-model:value="searchText"
                                    class-name="!h-10"
                                    @search="handleInputSearch()"
                                />
                                <GpFontIcon
                                    name="icon-guanbi2"
                                    class="!text-base text-[#333333]/50 cursor-pointer absolute -top-2 -right-2 z-[2]"
                                    @click="handleInputSwitch"
                                />
                            </div>
                            <GpFontIcon
                                name="icon-shaixuan"
                                :class="['!text-2xl cursor-pointer ml-3 flex-none', filterCollapsed ? 'text-placeholder' : 'text-theme']"
                                @click="toggleFilter"
                            />
                        </div>
                        <div class="box-border">
                            <div class="pl-[14px] pr-6 pb-[10px] relative">
                                <GpFontIcon
                                    @click="toggleHrState()"
                                    name="icon-gengduodaohang"
                                    class="!text-base !leading-none text-secondary cursor-pointer absolute right-2 top-0 size-4"
                                />
                                <div
                                    :class="[
                                        'flex flex-row gap-[26px] cursor-pointer',
                                        hrStateCollapsed
                                            ? 'flex-nowrap overflow-x-clip'
                                            : 'flex-wrap',
                                    ]"
                                >
                                    <div
                                        v-for="item of hrStateOptions"
                                        :key="item.value"
                                        :class="[
                                            'text-sm !leading-5 flex-none',
                                            hrStateSelects.includes(item.value)
                                                ? 'text-theme font-bold'
                                                : 'text-secondary',
                                        ]"
                                        @click="handleHrStateTap(item)"
                                    >
                                        {{ item.label }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="h-[9px] box-border border-t border-solid border-t-[#EEEEEE]"
                            ></div>
                        </div>
                    </div>
                    <div class="absolute bg-white box-border flex flex-col inset-0 !top-20" v-show="!filterCollapsed">
                        <div class="flex-1 overflow-y-auto py-2 box-border px-[14px]">
                            <div class="flex flex-col gap-2 mb-6">
                                <div class="text-sm !leading-5 font-bold text-[#324366]">应聘时间</div>
                                <RangePicker size="large">
                                    <template #suffixIcon>
                                        <GpFontIcon name="icon-rili" class="text-primary !text-base" />
                                    </template>
                                    <template #separator>
                                        <span class="text-primary text-sm">~</span>
                                    </template>
                                </RangePicker>
                            </div>
                            <div class="flex flex-col gap-2 mb-6">
                                <div class="text-sm !leading-5 font-bold text-[#324366]">对话时间</div>
                                <RangePicker size="large">
                                    <template #suffixIcon>
                                        <GpFontIcon name="icon-rili" class="text-primary !text-base" />
                                    </template>
                                    <template #separator>
                                        <span class="text-primary text-sm">~</span>
                                    </template>
                                </RangePicker>
                            </div>
                            <div class="flex flex-col gap-2 mb-6">
                                <div class="text-sm !leading-5 font-bold text-[#324366]">学历</div>
                                <a-select size="large" placeholder="请选择学历"/>
                            </div>
                            <div class="flex flex-col gap-2 mb-6">
                                <div class="text-sm !leading-5 font-bold text-[#324366]">年龄</div>
                                <a-select size="large" placeholder="请选择年龄"/>
                            </div>
                            <div class="flex flex-col gap-2 mb-6">
                                <div class="text-sm !leading-5 font-bold text-[#324366]">经验</div>
                                <a-select size="large" placeholder="请选择经验"/>
                            </div>
                            <div class="flex flex-col gap-2 mb-6">
                                <div class="text-sm !leading-5 font-bold text-[#324366]">院校</div>
                                <a-select size="large" placeholder="请选择院校"/>
                            </div>
                            <div class="flex flex-col gap-2 mb-6">
                                <div class="text-sm !leading-5 font-bold text-[#324366]">意向</div>
                                <a-select size="large" placeholder="请选择意向"/>
                            </div>
                            <div class="flex flex-col gap-2 mb-6">
                                <div class="text-sm !leading-5 font-bold text-[#324366]">匹配度</div>
                                <a-space :size="6" align="center" class="match-space">
                                    <template #split>
                                        <span class="text-primary text-sm">~</span>
                                    </template>
                                    <InputNumber placeholder="最小值" size="large" :min="0" style="width: 100%;" />
                                    <InputNumber placeholder="最大值" size="large" :min="0" style="width: 100%;" />
                                </a-space>
                            </div>
                        </div>
                        <div class="flex flex-none h-15 box-border flex-row justify-center items-center gap-[10px] border-t border-solid border-[#EEEEEE]">
                            <a-button size="large" class="w-1/3" @click="resetFilter">
                                重置
                            </a-button>
                            <a-button size="large" class="w-1/2" type="primary" @click="confirmFilter">
                                查询
                            </a-button>
                        </div>
                    </div>
                    <div
                        class="h-full box-border overflow-auto pt-[115px] no-scrollbar"
                    >
                        <div
                            v-for="item of jobList"
                            :key="item.id"
                            :class="[
                                'h-24 box-border flex flex-col justify-center px-[14px] cursor-pointer hover:bg-linear-270 hover:from-0% hover:from-theme/2 hover:to-100% hover:to-theme/5',
                                {
                                    'bg-linear-270 from-0% from-theme/4 to-100% to-theme/10':
                                        currentSesion === item.id,
                                },
                            ]"
                            @click="toggleCurrentSesion(item.id)"
                        >
                            <div class="flex flex-row items-center gap-[10px]">
                                <GpAvatarImg
                                    v-if="item.memberAvatar"
                                    :src="item.memberAvatar"
                                    class="size-10 border border-solid border-[#EEEEEE] flex-none"
                                />
                                <div v-else class="flex-none flex flex-row items-center justify-center size-10 bg-theme text-white text-base font-bold rounded-full">
                                    {{ item.memberName?.charAt(0) }}
                                </div>
                                <div
                                    class="flex flex-col justify-center flex-1 w-0"
                                >
                                    <div
                                        class="text-primary text-base !leading-6 font-bold"
                                    >
                                        {{ item.memberName }}
                                    </div>
                                    <div
                                        class="text-primary text-xs !leading-4"
                                    >
                                        {{ item.jobName }}
                                    </div>
                                </div>
                                <div
                                    v-if="
                                        item.memberState ===
                                        EnumChatState.已约面
                                    "
                                    class="w-[56px] h-[23px] box-border flex flex-row items-center bg-cover bg-no-repeat bg-[url(/images/person-dated.png)]"
                                >
                                    <div
                                        class="text-xs !leading-4 text-secondary text-center"
                                    >
                                        已约面
                                    </div>
                                </div>
                                <div
                                    v-else
                                    class="w-[91px] h-[39px] box-border flex flex-row items-center bg-cover bg-no-repeat bg-[url(/images/person-fit.png)]"
                                >
                                    <div
                                        class="text-xs !leading-4 font-medium text-theme size-[39px] flex justify-center items-center flex-none"
                                    >
                                        {{ item.matchScore }}%
                                    </div>
                                    <div
                                        class="text-xs !leading-4 text-theme flex-1 text-center"
                                    >
                                        {{ hrStateMap.get(item.memberState) }}
                                    </div>
                                </div>
                            </div>
                            <div class="flex flex-row items-center gap-5 mt-2">
                                <div
                                    class="flex-1 w-0 truncate text-third text-xs !leading-4"
                                >
                                    {{ item.lastMessage }}
                                </div>
                                <div
                                    class="flex-none text-secondary text-xs !leading-4"
                                >
                                    {{ dateFormat(item.lastTime) }}
                                </div>
                            </div>
                        </div>
                        <div
                            class="text-sm !leading-6 text-placeholder text-center"
                            ref="jobListIndicatorRef"
                        >
                            {{ jobListLoading ? '加载中...': null }}
                        </div>
                    </div>
                </div>
            </section>
            <section
                class="h-full overflow-hidden bg-white rounded-xl flex-1 flex flex-col min-w-[640px]"
            >
                <div
                    class="flex-none flex flex-row items-center h-[107px] px-6 box-border border-b border-solid border-[#EEEEEE]"
                >
                    <GpAvatarImg
                        v-if="chatDetail?.memberAvatar"
                        :src="chatDetail?.memberAvatar"
                        class="size-[56px] border border-solid border-[#EEEEEE] mr-[14px]"
                    />
                    <div v-else class="mr-[14px] flex flex-row items-center justify-center size-[56px] bg-theme text-white text-base font-bold rounded-full">
                        {{ chatDetail?.memberName?.charAt(0) }}
                    </div>
                    <div class="flex flex-col justify-center gap-0.5">
                        <div class="text-xl !leading-7 font-bold text-primary">
                            {{ chatDetail?.memberName }} ·
                            {{ chatDetail?.jobName }}
                        </div>
                        <a-space class="text-primary text-sm" :size="0">
                            <template #split>
                                <a-divider
                                    type="vertical"
                                    class="border-[#ACAEB2] !mx-2"
                                />
                            </template>
                            <span>{{
                                mapGender.get(
                                    chatDetail?.memberGender ?? EnumGender.保密,
                                )
                            }}</span>
                            <span>{{ chatDetail?.memberAge }}岁</span>
                            <span>{{ chatDetail?.memberCityName }}</span>
                            <span>{{ chatDetail?.memberWorkYears }}年</span>
                            <span>{{
                                mapEducation.get(chatDetail?.memberEducation!)
                            }}</span>
                        </a-space>
                    </div>
                    <a-button ghost type="primary" size="large" class="ml-auto" :disabled="!currentSesion" @click="viewResume">
                        简历详情
                    </a-button>
                    <a-button
                        type="default"
                        size="large"
                        class="ml-[10px]"
                        :disabled="!currentSesion"
                        @click="markUnfit"
                    >
                        不合适
                    </a-button>
                </div>
                <div ref="scrollEl"
                    class="flex-1 h-0 overflow-auto px-6 py-5 scroll-smooth no-scrollbar"
                >
                    <MessageList :messages @any="handleMessageAnyEvent"/>
                </div>
                <div class="flex-none">
                    <a-space class="px-6 py-[12px]">
                        <a-button
                            size="middle"
                            type="default"
                            v-for="action in actions"
                            :key="action.value"
                            :disabled="!currentSesion"
                            @click="handleAction(action)"
                            >{{ action.label }}</a-button
                        >
                        <a-button
                            size="middle"
                            type="default"
                            :disabled="!currentSesion"
                            @click="handleTapInterview()"
                            >{{ chatDetail?.interviewId ? '查看面试' : '约面试' }}</a-button
                        >
                    </a-space>
                    <div
                        class="border-t border-solid border-t-[#EEEEEE] px-6 h-[160px] flex flex-col"
                    >
                        <div :class="['flex-1 box-border py-4', !currentSesion ? 'cursor-not-allowed' : '']" @click="editableRef?.focus">
                            <GpEditable ref="editableRef"
                                v-model:content="content"
                                placeholder="请输入"
                                :disabled="!currentSesion"
                                @press-enter="sendMessage()"
                            />
                        </div>
                        <div
                            class="flex-none flex flex-row items-center justify-between pt-[14px]"
                        >
                            <label>
                                <a-switch v-model:checked="withAI" />
                                <span class="pl-2">AI代理沟通</span>
                            </label>
                            <div
                                :class="[
                                    'flex flex-row items-center h-8 px-8 rounded-[6px] text-sm text-white touch-manipulation',
                                    content
                                        ? 'bg-theme cursor-pointer'
                                        : 'bg-[#496EA9]/50 cursor-not-allowed',
                                ]"
                                @click="sendMessage()"
                            >
                                发送
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section
                class="w-[300px] h-full overflow-hidden bg-white rounded-xl flex-none relative"
            >
                <div class="absolute bottom-0 left-0 right-0 h-25 box-border bg-linear-180 from-0% from-white/0 to-30% to-white">
                    <img src="/images/female-person.png" :width="100" :height="100" class="size-25 object-cover absolute right-0" />
                </div>
                <div class="h-full pb-25 box-border overflow-auto no-scrollbar">
                    <div class="h-16 box-border bg-[url(/images/ai-match-bg.png)] bg-no-repeat bg-origin-border] bg-cover px-3 pt-6">
                        <img src="/images/ai-match-text.png" />
                    </div>
                    <div class="px-6 box-border">
                        <div class="flex flex-row justify-center items-end gap-4 pt-1 pb-5">
                            <div class="flex flex-row items-end gap-1">
                                <span class="text-theme text-4xl font-black">{{ relatedResume?.baseScore ?? "--" }}</span>
                                <span class="text-theme text-sm font-bold">分</span>
                            </div>
                            <div class="text-sm text-[#496EA9]">
                                {{ reactionitem.text }}
                            </div>
                        </div>
                        <div class="w-full h-[200px] box-border">
                            <RadarChart :chartData="{}" />
                        </div>
                        <a-space wrap :size="8" class="mt-4">
                            <div v-for="item of resumeMatchTags" :key="item" class="h-8 px-[10px] box-border !leading-8 rounded-sm border border-solid border-theme/20 bg-theme/4 text-secondary text-sm">
                                {{ item }}
                            </div>
                        </a-space>
                    </div>
                    <div class="mt-10">
                        <div class="flex flex-row items-center gap-2 px-[10px]">
                            <div class="size-[10px] box-border flex flex-row justify-center items-center rounded-full bg-no-repeat bg-origin-border bg-[linear-gradient(90deg,#07A9FA,#1640EE,#A454FA,#FA5470)]">
                                <div class="size-[6px] bg-white rounded-full"></div>
                            </div>
                            <span class="text-primary text-base font-bold">意向匹配度</span>
                        </div>
                        <div class="box-border px-6">
                            <div class="flex flex-row gap-[6px] mt-4">
                                <GpFontIcon name="icon-chenggong" class="text-[#1fb887] !text-base flex-none" />
                                <div class="flex-1 w-0 box-border">
                                    <div class="text-primary text-sm !leading-5 font-medium">工作内容</div>
                                    <div class="text-third text-xs !leading-4 mt-0.5">已确认接受电话销售</div>
                                </div>
                            </div>
                            <div class="flex flex-row gap-[6px] mt-4">
                                <GpFontIcon name="icon-chenggong" class="text-[#1fb887] !text-base flex-none" />
                                <div class="flex-1 w-0 box-border">
                                    <div class="text-primary text-sm !leading-5 font-medium">薪资范围</div>
                                    <div class="text-third text-xs !leading-4 mt-0.5">期望12K，已确认符合期望薪酬范围</div>
                                </div>
                            </div>
                            <div class="flex flex-row gap-[6px] mt-4">
                                <GpFontIcon name="icon-ic_zhuyi" class="text-[#fd9900] !text-xl flex-none" />
                                <div class="flex-1 w-0 box-border">
                                    <div class="text-primary text-sm !leading-5 font-medium">通勤地址</div>
                                    <div class="text-third text-xs !leading-4 mt-0.5">距离有点远，需要再考虑看看</div>
                                </div>
                            </div>
                            <div class="flex flex-row gap-[6px] mt-4">
                                <GpFontIcon name="icon-ic_bupipei" class="text-[#ea3f3c] !text-xl flex-none" />
                                <div class="flex-1 w-0 box-border">
                                    <div class="text-primary text-sm !leading-5 font-medium">上班时间</div>
                                    <div class="text-third text-xs !leading-4 mt-0.5">不接受单休，需要评估</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-10">
                        <div class="flex flex-row items-center gap-2 px-[10px]">
                            <div class="size-[10px] box-border flex flex-row justify-center items-center rounded-full bg-no-repeat bg-origin-border bg-[linear-gradient(90deg,#07A9FA,#1640EE,#A454FA,#FA5470)]">
                                <div class="size-[6px] bg-white rounded-full"></div>
                            </div>
                            <span class="text-primary text-base font-bold">综合建议</span>
                        </div>
                        <div class="mt-4 px-6 text-sm !leading-5 text-[#496EA9]">
                            对方不接受单休，暂不考虑。对方不接受单休，暂不考虑。对方不接受单休，暂不考虑。对方不接受单休，暂不考虑。对方不接受单休，暂不考虑。
                            对方不接受单休，暂不考虑。对方不接受单休，暂不考虑。对方不接受单休，暂不考虑。对方不接受单休，暂不考虑。对方不接受单休，暂不考虑。对方不接受单休，暂不考虑。对方不接受单休，暂不考虑。
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <InviteInterviewModal :session="currentSesion" ref="inviteInterviewModalRef" @success="handleAfterModal(true, $event)" />
        <ViewInterviewModal :session="currentSesion" :chatDetail ref="viewInterviewModalRef" @close="handleAfterModal" @next-message="handleAfterModal(false, $event)" />
        <GpResumeDetailModal ref="resumeDetailRef" @close="handleAfterModal" @get-resume="relatedResume = $event"/>
    </div>
</template>
<script lang="ts" setup>
import { RangePicker, InputNumber } from "ant-design-vue";
import { EnumChatState, EnumGender, type MemberChatDetailResult } from "@/api/siderBar/model";
import { useHRState } from "./composables/useHRState";
import { useJobListFetch } from "./composables/useJobListFetch";
import { dateFormat } from "@/utils/dayjs";
import { mapGender, mapEducation } from "@/constants/enum-options";
import { type Exposed as GpEditableExposed } from "@/components/GpEditable/type";
import { useChatRoom } from "./composables/useChatRoom";
import { useJobSelect } from "./composables/useJobSelect";
import { useSearchInput } from "./composables/useSearchInput";
import { useFilterPannel } from "./composables/useFilterPannel";
import MessageList from "./components/MessageList";
import { type Exposed as InviteInterviewModalExposed } from "./components/InviteInterviewModal/types";
import { type Exposed as ViewInterviewModalExposed } from "./components/ViewInterviewModal/types";
import { type Exposed as GpResumeDetailModalExposed } from "@/components/GpResumeDetailModal/type";

defineOptions({
    name: "AIChatPage",
});
definePage({
    name: "AIChatPage",
    meta: {
        title: "AI沟通",
        isLayout: false,
    },
});
const editableRef = ref<GpEditableExposed>()
const inviteInterviewModalRef = ref<InviteInterviewModalExposed>()
const resumeDetailRef = ref<GpResumeDetailModalExposed>()
const viewInterviewModalRef = ref<ViewInterviewModalExposed>()
const relatedResume = ref<MemberChatDetailResult>()
const reactionitem = computed(() => {
    const res = {
        text: "--",
    }
    const resume = toValue(relatedResume)
    if (resume) {
        const { baseScore: score, isAgeMatch, isEducationMatch, isExperienceMatch, isSchoolMatch } = resume
        if (isSetValue(score)) {
            if (score < 60 || [isAgeMatch, isEducationMatch, isExperienceMatch, isSchoolMatch].some(l => !l)) {
                const hexintiaojian = resume.matchingJobRate! >= 60 && resume.matchingSkillRate! >= 60
                res.text = hexintiaojian ? "岗位匹配度较低，不建议邀约" : "不满足条件要求，不建议邀约"
            } else if (score >= 60 && score < 80) {
                res.text = "符合要求，可以邀约"
            } else if (score >= 80){
                res.text = "非常匹配，建议邀约"
            }
        }
    }
    return res
})
const resumeMatchTags = computed(() => {
    const resume = toValue(relatedResume)
    if (!resume) return []
    return (resume.matchingJobTags ?? []).concat(resume.matchingSkillTags ?? [])
})
const {
    actions,
    content,
    withAI,
    currentSesion,
    toggleCurrentSesion,
    chatDetail,
    getChatDetail,
    markUnfit,
    handleAction,
    sendMessage,
    messages,
    scrollEl,
    handleMessageAnyEvent,
    getNextMessage
} = useChatRoom();
const {
    handleHrStateTap,
    hrStateCollapsed,
    hrStateSelects,
    toggleHrState,
    hrStateOptions,
    hrStateMap,
} = useHRState(fetchJobList);
const { 
    jobList, 
    jobListIndicatorRef, 
    jobListLoading, 
    jobListPristine, 
    refetchJobList 
} = useJobListFetch();
const {
    getJobParams,
    jobOptions,
    handleJobTap,
    jobSelects,
    selectedJob
} = useJobSelect(fetchJobList)
const {
    getSearchParams,
    handleInputSearch,
    handleInputSwitch,
    searchCollapsed,
    searchText
} = useSearchInput(fetchJobList)
const {
    filterCollapsed,
    filterState,
    toggleFilter,
    confirmFilter,
    resetFilter
} = useFilterPannel(fetchJobList)
useEffectScope(() => {
    watch(jobListPristine, () => {
        if (jobList.value.length) toggleCurrentSesion(jobList.value[0].id)
    }, {
        once: true,
        immediate: false
    })
})
function fetchJobList() {
    const [hrState] = toValue(hrStateSelects);
    return refetchJobList({
        hrState,
    });
}
function viewResume() {
    if (resumeDetailRef.value && currentSesion.value) {
        resumeDetailRef.value.show({
            current: currentSesion.value,
            available: [currentSesion.value],
            interviewId: chatDetail.value?.interviewId
        })
    }
}
function handleAfterModal(refresh = true, messageId?: number) {
    messageId && getNextMessage(messageId)
    refresh && getChatDetail()
}
function handleTapInterview() {
    if (chatDetail.value?.interviewId) {
        if (viewInterviewModalRef.value) {
            viewInterviewModalRef.value.open()
        }
    } else {
        if (inviteInterviewModalRef.value) {
            inviteInterviewModalRef.value.open({
                jobTypeId: chatDetail.value?.jobTypeId
            })
        }
    }
}
</script>
<style lang="less" scoped>
.filter-job-item {
    color: var(--color-primary);
    &:hover,
    &.active-filter-job-item {
        background: #F8F9FA;
        color: var(--color-theme);
    }

    &.active-filter-job-item .iconfont {
        display: block;
    }
}
:global(.match-space .ant-space-item) {
    flex: 1;
}
</style>
